<template>
  <view class="evaluate-list" ref="container">
    <div class="bar"> </div>
    <view class="header">
      {{sumNum || 0}} 条评论
    </view>
    <UserEvaluation :reply="reply"></UserEvaluation>
  </view>
</template>
<script>
import UserEvaluation from "@/components/UserEvaluation";
import { getReplyConfig, getReplyList } from "@/api/store";

export default {
  name: "EvaluateList",
  components: {
    UserEvaluation,
  },
  props: {},
  data: function() {
    return {
      product_id: 0,
      replyData: {},
      navList: [
        { evaluate: "全部", num: 0 },
        { evaluate: "好评", num: 0 },
        { evaluate: "中评", num: 0 },
        { evaluate: "差评", num: 0 }
      ],
      sumNum: 0,
      currentActive: 0,
      page: 1,
      limit: 8,
      reply: [],
      loadTitle: "",
      loading: false,
      loadend: false
    };
  },
  onLoad: function(options) {
    this.product_id = options.id;
    this.getProductReplyCount();
    this.getProductReplyList();
  },
  onReachBottom() {
    !this.loading && this.getProductReplyList();
  },
  methods: {
    getProductReplyCount () {
      getReplyConfig(this.product_id).then(res => {
        this.$set(this, "replyData", res.data);
        this.sumNum = res.data.sumCount;
        // this.navList[0].num = res.data.sumCount;
        // this.navList[1].num = res.data.goodCount;
        // this.navList[2].num = res.data.inCount;
        // this.navList[3].num = res.data.poorCount;
      });
    },
    getProductReplyList () {
      if (this.loading) return; //阻止下次请求（false可以进行请求）；
      if (this.loadend) return; //阻止结束当前请求（false可以进行请求）；
      this.loading = true;
      let q = { page: this.page, limit: this.limit, type: this.currentActive };
      getReplyList(this.product_id, q).then(res => {
        this.loading = false;
        //apply();js将一个数组插入另一个数组;
        this.reply.push.apply(this.reply, res.data);
        this.loadend = res.data.length < this.limit; //判断所有数据是否加载完成；
        this.page = this.page + 1;
      });
    },
    changeType (index) {
      this.currentActive = index;
      this.page = 1;
      this.loadend = false;
      this.$set(this, "reply", []);
      this.getProductReplyList();
    }
  }
};
</script>
<style lang="less">
//@import "../../../style/style";
</style>
<style scoped lang="less">
.noCommodity {
  height: 8*100rpx;
  background-color: #fff;
}

.bar {
  width: 100%;
  height: 16rpx;
  background: #F3F7F8;
}
.header {
  font-weight: bold;
  font-size: 32rpx;
  color: #222222;
  line-height: 44rpx;
  text-align: center;
  padding: 40rpx 0 20rpx;
  background: #FFFFFF;
}
</style>
